1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
import type { ImageResponseOptions } from 'next/dist/compiled/@vercel/og/types';
import { ImageResponse } from 'next/og';
import type { ReactElement } from 'react';
interface GenerateProps {
title: string;
description?: string;
}
export function generateOGImage(
options: GenerateProps & ImageResponseOptions,
): ImageResponse {
const { title, description, ...rest } = options;
return new ImageResponse(
generate({
title,
description,
}),
{
width: 1200,
height: 630,
...rest,
},
);
}
export function generate({
title,
description = 'Learn more about this post by visiting the website.',
}: GenerateProps): ReactElement {
return (
<div
tw='flex h-full w-full bg-black text-white'
style={{ fontFamily: 'Geist Sans' }}
>
<div tw='flex border absolute border-stone-900 border-dashed inset-y-0 left-16 w-[1px]' />
<div tw='flex border absolute border-stone-900 border-dashed inset-y-0 right-16 w-[1px]' />
<div tw='flex border absolute border-stone-900 inset-x-0 h-[1px] top-16' />
<div tw='flex border absolute border-stone-900 inset-x-0 h-[1px] bottom-16' />
<div tw='flex flex-col absolute w-[896px] justify-center inset-32'>
<div
tw='tracking-tight flex-grow-1 flex flex-col justify-center leading-[1.1]'
style={{
textWrap: 'balance',
fontWeight: 600,
fontSize: title && title.length > 20 ? 64 : 80,
letterSpacing: '-0.04em',
}}
>
{title}
</div>
<div
tw='text-[40px] leading-[1.5] flex-grow-1 text-stone-400'
style={{
fontWeight: 500,
textWrap: 'balance',
}}
>
{description}
</div>
</div>
</div>
);
}
|
